<template>
    <f7-page>
		<f7-navbar>
			<f7-nav-title :title="title"></f7-nav-title>
			<f7-nav-right>
				<f7-button round raised style="margin-right: 10px;"
				    @click="projectSelectOpen">选择项目</f7-button>
			</f7-nav-right>
		</f7-navbar>
		<f7-block inset style="text-align:center;">
		    <f7-row>
		        <f7-col>
                    <f7-link style="display:block;" href="/Workbench/LocaleCheck">
                        <f7-icon size="45px" f7="search"></f7-icon>
                        <br />
                        <span>现场检查</span>
                    </f7-link>
		        </f7-col>
		        <f7-col>
                    <f7-link style="display:block;" href="/Workbench/QualityMeasure">
                        <f7-icon size="45px" f7="compose"></f7-icon>
	                    <br/>
	                    <span>实测实量</span>
                    </f7-link>
		        </f7-col>
		        <f7-col>
		        </f7-col>
		    </f7-row>
		</f7-block>
		<f7-popup :id="projectPopupId">
            <f7-page>
                <f7-navbar>
                    <f7-nav-left>
                        <f7-link popup-close>
		                    <f7-icon material="close"></f7-icon>
		                </f7-link>
                    </f7-nav-left>
                    <f7-nav-title title="请选择项目"></f7-nav-title>
                    <f7-nav-right>
                        <f7-link class="searchbar-enable" data-searchbar=".searchbar-demo">
                            <f7-icon material="search"></f7-icon>
                        </f7-link>
                    </f7-nav-right>
                    <f7-searchbar placeholder="搜索"
				        class="searchbar-demo"
				        expandable
				        search-container=".search-list"
				        search-in=".item-title"
				        :disable-button="true"
				        disable-button-text="取消"
				    ></f7-searchbar>
                </f7-navbar>
                <f7-list style="margin:15px;" class="searchbar-not-found">
			        <f7-list-item title="没有匹配项目"></f7-list-item>
			    </f7-list>
                <f7-list style="margin:15px;" class="search-list searchbar-found">
                    <f7-list-group v-for="(root, i) in projects" :key="root.id">
                        <f7-list-item group-title :title="root.name"></f7-list-item>
                        <f7-list-item v-for="(child, j) in root.children" 
                            :key="child.id" :radio="true" :checked="projectId == child.id" 
                            :title="child.name" @click="projectId = child.id">
                        </f7-list-item>
                    </f7-list-group>
                </f7-list>
            </f7-page>
		</f7-popup>
    </f7-page>
</template>

<script>
import Common from '@/utils/Common.js';
import store from '@/store';
import { getUser, setUser, clearUser } from '@/utils/auth';
import { getStore, setStore, clearStore } from '@/utils/storage';
import keys from '@/utils/rememberKeys';

export default {
	store: store,
	data() {
		return {
			projectPopupId: Common.uuid(),
			projectId: getStore(keys.projectIdKey)
		};
	},
	methods: {
        projectSelectOpen: function() {
            this.$f7.popup.open('#' + this.projectPopupId, true);
        },
        projectSelectClose: function() {
            this.$f7.popup.close('#' + this.projectPopupId, true);
        }
	},
	computed: {
		title: function() {
			if(this.projectId == null) {
				return '';
			}
			let project = this.$store.state.global.projectMap[this.projectId];
			return project == null ? '' : project.project_name;
		},
		projects: function() {
			let user = getUser();
			let projectIds = this.$store.state.global.userProjectRel.userMap[user.userId];
			if(projectIds == null) {
				return [];
			}
			let projects = [];
			let map = {};
			for(let i = 0; i < projectIds.length; i++) {
                let projectId = projectIds[i];
                let project = this.$store.state.global.projectMap[projectId];
                if(project && project.parent_project_id) {
                	let parent = map[project.parent_project_id];
                	if(parent == null) {
                        let parentProject = this.$store.state.global.projectMap[project.parent_project_id];
                        parent = {};
                        parent.id = parentProject.id;
                        parent.parent= null;
                        parent.name = parentProject.project_name;
                        parent.children = [];
                        map[parent.id] = parent;
                        projects.push(parent);
                	}
                	let p = {};
                    p.id = project.id;
                    p.parent= parent;
                    p.name = project.project_name;
                    p.children = [];
                    parent.children.push(p);
                    map[p.id] = p;
                }
			}
			return projects;
		}
	},
	watch: {
		'projects': function(newVal, oldVal) {
			if(this.projectId == null) {
				for(let i = 0; i < this.projects.length; i++) {
					let project = this.projects[i];
					for(let j = 0; j < project.children.length; i++) {
						let child = project.children[j];
						this.projectId = child.id;
						return;
					}
				}
			}
		},
		'projectId': function(newVal, oldVal) {
			setStore(keys.projectIdKey, newVal);
			clearStore(keys.qualityMeasureUnitIdKey);
			clearStore(keys.qualityMeasureProblemClassIdKey);
			this.projectSelectClose();
		}
	}
}
</script>

<style scoped>

</style>